<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>拼图游戏</title>
    <style>
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        background-repeat: no-repeat;
        background-color: transparent;
        overflow: hidden;
      }
      #title { 
        position: absolute;
        width: 232px;
        height: 60px;
        left: 50px;
        top: 30px;
        font-size: 30px;
        color: #fff;
      }
      #page {
        position: absolute;
        top: 40px;
        right: 50px;
        font-size: 18px;
        color: #fff;
      }
      #page .color {
        color: #f60;
      }
      #list{
        position: absolute;
        left: 50px;
        top: 90px;
      }
      #list .item{
        position: absolute;
        padding: 0 21px;
        width: 170px;
        height: 280px;
        background: url(./images/placeholder_bg.png) repeat;
        border-radius: 15px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
        color: #fff;
        overflow: hidden;
      }
      #list .item .img-container {
        width: 170px;
        height: 190px;
        margin: 20px 0 5px;
        border-radius: 15px;
        overflow: hidden;
        position: relative;
      }
      #list .item .title-container{
        width: 170px;
        height: 60px;
      }
      #list .item.focus{
        border-color: #ff1e92!important;
      }
    </style>
  </head>
  <body onload="init()">
    <div id="main">
	<!--联通不要 -->
      <div class='smallResolution' id="smallResolution"></div>
	  <!--联通不要 -->
      <div id="title"></div>
      <div id="page"></div>
      <div id="list"></div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="config/index.js"></script>
    <script src="api/index.js"></script>
    <script src="js/utlis.js"></script>
    <script src="js/KeyEnter.js"></script>
    <script src="js/event.js"></script>
    <script src="js/move.js"></script>
    <script src="js/log.js"></script>
    <script src="js/page.js"></script>

    <script src="components/dialog.js"></script>
    <script src="components/education.js"></script>
    <script>
      

      function getPreFocus() {
        var typeId = utils.getUrlParam("typeId", "");
        var typeName = unescape(utils.getUrlParam("typeName", ""))
        var page = utils.getUrlParam("page", 1);
        // var index = utils.getUrlParam("index", 0);
        var elId = utils.getUrlParam("elId", "list-0")
        education.init({
          typeId: typeId,
          page: page,
          typeName: typeName,
          // index: index
        })
        var dom = document.getElementById(elId)
        dom && utils.toggleClass(dom)
      }

      function init () {
        page.init()
        dialog.init()
        getPreFocus()
        log.commit({
          name: '熊猫教育页面',
          type1: 'browse',
          type2: 'education',
          starttime: new Date().getTime(),
        })
      }

      function keyUp () {
        if (dialog.visible) return
        var dom = move.up();
        if (dom) {
          dom && utils.toggleClass(dom);
        } else {
          if (education.page > 1) {
            var id = $('.focus').attr('id')
            var index = parseInt(id.match(/\d+/)[0])
            education.page--
            education.render()
            index = index % 5 + 5
            utils.toggleClass($('#list .item').eq(index)[0])
          }
        }
      }

      function keyDown () {
        if (dialog.visible) return
        var dom = move.down();
        if (dom) {
          utils.toggleClass(dom)
        } else {
          if (education.page < education.totalPage) {
            var id = $('.focus').attr('id')
            var index = parseInt(id.match(/\d+/)[0])
            education.page++
            education.render()
            index %= 5 
            if (education.page == education.totalPage) {
              var len = (page.data.list.length - 1) % 5
              index = index > len ? len : index
            }
            utils.toggleClass($('#list .item').eq(index)[0])
          }
        }
      }

      function keyLeft () {
        if (dialog.visible) return
        var dom = move.left();
        dom && utils.toggleClass(dom);
      }

      function keyRight () {
        if (dialog.visible) return
        var dom = move.right();
        dom && utils.toggleClass(dom);
      }

      function keyEnter () {
        if (dialog.visible) {
          if (dialog.back) {
            page.goback()
          } else {
            dialog.hide()
          }
        } else {
          var typeId = education.typeId
          var pageIndex = education.page
          var info = utils.getCurInfo()
          var index = parseInt(info.index)
          var data = page.data.list[(education.page - 1)  * education.number + index]
          if (page.isSub != 0 && data.charge != 0) {
            utils.order()
          } else {
            var typeName = escape(education.typeName)
            var id = info.id
            var form = config.path + '/game-1-list.html?elId=' + id + '&typeName=' + typeName + '&page=' + pageIndex + '&typeId='  + typeId
            var to = config.path + "/game-1.html?seriesId=" + data.ID
            page.addUrl(to, form)
          }
        }
      }

      function keyBack () {
        if (dialog.visible) {
          dialog.hide()
        } else {
          page.goback()
        }
      }
    </script>
  </body>
</html>
